  <!DOCTYPE html>
  <html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>修改静态svg</title>
    <style>
      .style5{
        position: fixed;
        right:100px;
        top:200px;
      }
      #animated_div
      {
      width:70px;
      height:70px;
      background:#92B901;
      color:#ffffff;
      position:relative;
      padding:10px;
      animation:mymove 5s 1;
      border-radius:5px;
      animation-iteration-count: infinite;
      }

      @keyframes mymove
      {
      0%    {transform: rotate(0deg);left:0px;}
      25%   {transform: rotate(20deg);left:0px;}
      50%   {transform: rotate(0deg);left:500px;}
      55%   {transform: rotate(0deg);left:500px;}
      70%   {transform: rotate(0deg);left:500px;background:#1ec7e6;}
      100%  {transform: rotate(-360deg);left:0px;}
      }
    </style>
  </head>
  <body>
    <!-- 修改后 -->
  <div class="style5">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
      <rect x="0" y="0" width="4" height="10" fill="#333">
        <animateTransform attributeType="xml"
          attributeName="transform" type="translate"
          values="0 0; 0 20; 0 0"
          begin="0" dur="0.6s" repeatCount="indefinite" />
      </rect>
      <rect x="10" y="0" width="4" height="10" fill="#333">
        <animateTransform attributeType="xml"
          attributeName="transform" type="translate"
          values="0 0; 0 20; 0 0" 
          begin="0.2s" dur="0.6s" repeatCount="indefinite" />
      </rect>
      <rect x="20" y="0" width="4" height="10" fill="#333">
        <animateTransform attributeType="xml"
          attributeName="transform" type="translate"
          values="0 0; 0 20; 0 0"
          begin="0.4s" dur="0.6s" repeatCount="indefinite" />
      </rect>
    </svg>
  </div>
<!-- 原图 -->
  <div id="animated_div">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 50 50;" xml:space="preserve">
      <rect x="0" y="0" width="4" height="10" fill="#333">
        <animateTransform attributeType="xml"
          attributeName="transform" type="translate"
          values="0 0; 20 20; 0 0" 
          begin="0" dur="1.2s" repeatCount="indefinite" />
      </rect>
      <rect x="10" y="0" width="4" height="10" fill="#333">
        <animateTransform attributeType="xml"
          attributeName="transform" type="translate"
          values="0 0; 20 20; 0 0" 
          begin="0.2s" dur="1.2s" repeatCount="indefinite" />
      </rect>
      <rect x="20" y="0" width="4" height="10" fill="#333">
        <animateTransform attributeType="xml"
          attributeName="transform" type="translate"
          values="0 0; 20 20; 0 0" 
          begin="0.4s" dur="1.2s" repeatCount="indefinite" />
      </rect>
    </svg>
  </div>
  <div>
    <div>
    <ul>
    <li>添加方块</li>
    <li>方块颜色变化：@keyframes mymove的70%中添加background</li>
    <li>方块移动：animation: mymove 5s 1;</li>
    <li>慢速：svg组合图像单个rect的dur="0.6s"变为1.2s</li>
    
    </ul>
  </div>
  </div>
  </body>
  </html>